<template>
    <div id="instructionInfo-content">
        <el-row class="form-content">
            <el-form label-width="70px">
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="产品代码(名称):">
                            <el-select v-model="searchForm.fundCode" size="mini" filterable clearable style="width: 100%">
                                <el-option
                                    v-for="i in fundCodeSelectData"
                                    :key="i.fundCode"
                                    :label="i.fundCode + ' ' + i.fundNameSt"
                                    :value="i.fundCode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="证券代码(名称):">
                            <el-select
                                v-model="searchForm.stockCode"
                                filterable
                                :filter-method="getstockCodeList"
                                @visible-change="handleStockVisibleChange"
                                @clear="getstockCodeList('')"
                                clearable
                                size="mini"
                                style="width: 100%"
                            >
                                <el-option
                                    v-for="i in stockCodeSelectData"
                                    :key="i.stockCode"
                                    :label="i.stockCode + ' ' + i.stockNameSt"
                                    :value="i.stockCode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="委托方向:">
                            <el-select v-model="searchForm.orderDirection" clearable size="mini" style="width: 100%">
                                <el-option v-for="i in orderDirectionData" :key="i.dictKey" :label="i.dictKeyName" :value="i.dictKey"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="证券类别:">
                            <el-select v-model="searchForm.stockType" filterable clearable size="mini" style="width: 100%">
                                <el-option v-for="item in stockType" :key="item.dictKey" :value="item.dictKey" :label="item.dictKeyName"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="业务类型:">
                            <el-select v-model="searchForm.businessType" clearable size="mini" style="width: 100%">
                                <el-option value="x" label="融资融券信用业务"> </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="2">
                        <el-button type="primary" size="mini" @click="query">查询</el-button>
                    </el-col>
                </el-row>
                <el-row>
                    <el-col :span="5">
                        <el-form-item label="指令序号:">
                            <el-input size="mini" placeholder="" v-model="searchForm.instNo"></el-input>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="指令状态:">
                            <el-select v-model="searchForm.instStatus" size="mini" style="width: 100%">
                                <el-option v-for="(value, key) in instructionStatus" :key="key" :value="key" :label="value"></el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>

                    <el-col :span="4">
                        <el-form-item label="下达人:">
                            <el-select v-model="searchForm.directUser" filterable clearable size="mini" style="width: 100%">
                                <el-option
                                    v-for="item in orderUsers"
                                    :key="item.dictKey + item.dictCode"
                                    :value="item.dictCode"
                                    :label="item.dictKey + ' ' + item.dictKeyName"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="4">
                        <el-form-item label="下达日期:">
                            <el-date-picker
                                v-model="directDate"
                                type="date"
                                placeholder="请选择"
                                value-format="yyyyMMdd"
                                format="yyyy/MM/dd"
                                style="width: 100%"
                            >
                            </el-date-picker>
                        </el-form-item>
                    </el-col>
                    <el-col :span="6">
                        <el-button type="primary" size="mini" @click="layoutDialog = true">布局设置</el-button>
                        <el-button size="mini" @click="handleButtonClick('hide')" v-show="SHOW_SECURITY">{{
                            hideVisible ? '展开' : '隐藏'
                        }}</el-button>
                    </el-col>
                </el-row>
                <el-row v-if="!hideVisible">
                    <el-col :span="5">
                        <el-form-item label="资产单元编号(名称):">
                            <el-select v-model="searchForm.assetCode" filterable clearable size="mini">
                                <el-option
                                    v-for="i in assetCodeSelectData"
                                    :key="i.assetCode"
                                    :label="i.assetCode + ' ' + i.assetName"
                                    :value="i.assetCode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                    <el-col :span="5">
                        <el-form-item label="组合编码(名称):">
                            <el-select v-model="searchForm.fundAcCode" filterable clearable size="mini">
                                <el-option
                                    v-for="i in fundAccountCodeSelectData"
                                    :key="i.fundAccountCode"
                                    :label="i.fundAccountCode + ' ' + i.fundAccountName"
                                    :value="i.fundAccountCode"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-col>
                </el-row>
            </el-form>
        </el-row>
        <el-row class="table-content">
            <div style="height: calc(100% - 60px)">
                <vxe-table
                    :key="tableKey"
                    :header-cell-style="{ backgroundColor: '#e8f3ff', padding: '4px 0' }"
                    :footer-cell-style="{ backgroundColor: '#e8f3ff', padding: '4px 0' }"
                    :data="dataSource"
                    border
                    v-loading="tableLoading"
                    element-loading-text="加载中"
                    size="mini"
                    height="100%"
                    ref="table"
                    @cell-click="handleRow"
                    style="cursor: pointer"
                    highlight-current-row
                    highlight-hover-row
                    stripe
                    auto-resize
                    resizable
                    :sort-config="{
                        defaultSort: { field: sortProp, order: sortOrder, orders: ['desc', 'asc', null] },
                        remote: true,
                    }"
                    @sort-change="changeTableSort"
                    show-header-overflow
                >
                    <template v-for="(item, index) in showFieldList">
                        <vxe-column
                            show-overflow
                            :key="index + 'name'"
                            :title="item.content"
                            :field="item.id"
                            :min-width="item.minWidth"
                            :width="item.width"
                            :fixed="item.fixed"
                            :sortable="item.id == 'operate' ? false : true"
                        >
                            <template slot="header">
                                <span>{{ item.content }}</span>
                            </template>
                            <template slot-scope="scope">
                                <span v-if="item.id == 'operate'">
                                    <el-button type="text" @click.stop="handleUpdateInst(scope.row)" :disabled="handleDisabled(scope.row)"
                                        >修改</el-button
                                    >
                                    <el-button type="text" @click.stop="handleBtnDel(scope.row)" :disabled="handleDisabled(scope.row)"
                                        >撤单</el-button
                                    >
                                </span>
                                <span v-else-if="item.id == 'instStatus'">
                                    {{ instructionStatus[scope.row.instStatus] }}
                                </span>
                                <span v-else-if="item.id == 'orderPriceType'">
                                    {{ scope.row.orderPriceType ? investPriceSelectData[scope.row.orderPriceType] : '--' }}
                                </span>
                                <span v-else-if="item.id == 'stockType'">
                                    {{ scope.row[item.id] ? stockTypePojo[scope.row[item.id]] : '--' }}
                                </span>

                                <span v-else-if="item.id == 'directTime'">
                                    {{ formatterDate(scope.row) }}
                                </span>

                                <span v-else-if="item.id == 'directUserName'">
                                    {{ scope.row.directUserName.trim() ? scope.row.directUserName : '--' }}
                                </span>

                                <span v-else-if="['orderBalance', 'orderAmount', 'orderPrice'].includes(item.id)">
                                    {{ scope.row[item.id] ? numberFormat(scope.row[item.id], 2) : '0' }}
                                </span>

                                <span v-else>{{ scope.row[item.id] && scope.row[item.id].trim() ? scope.row[item.id] : '--' }}</span>
                            </template>
                        </vxe-column>
                    </template>
                </vxe-table>
                <risk-pagination :paging="pages" @page-change="handleCurrentChange"></risk-pagination>
            </div>
        </el-row>
        <el-row class="tab-content">
            <el-tabs v-model="activeKey" style="height: 100%">
                <el-tab-pane label="指令明细" name="detail" class="inst-detail">
                    <div class="detail-container">
                        <InstructionDetail :key="detailKey" :detailFields="detailFields" :instructionInfo="clickRecord" :noData="noData" />
                    </div>
                </el-tab-pane>
                <el-tab-pane label="指令证券" name="stock">
                    <div style="height: 100%; padding: 4px 10px">
                        <risk-table :msg="instStockMsg" v-loading="tabsLoading"></risk-table>
                    </div>
                </el-tab-pane>

                <el-tab-pane label="指令结果" name="result">
                    <div style="height: 100%; padding: 4px 10px">
                        <risk-table
                            :msg="instResultMsg"
                            v-loading="tabsLoading"
                            @handleBtn="handleBtnLook"
                            :key="instResultMsgNumKey + 'instResultMsgNumKey'"
                            v-if="activeKey === 'result'"
                        ></risk-table></div
                ></el-tab-pane>
            </el-tabs>
        </el-row>
        <RiskTableLayout
            title="页面布局"
            :visible.sync="layoutDialog"
            :field-list="tableColumns"
            :selected-field-list="selectedFieldList"
            :fixed-field-list="fixedFieldList"
            table-name="MARGIN_TRADING_ORDER_INFO"
            @on-submit="onSubmit"
        />
    </div>
</template>
<script lang="ts">
import Invest from '@/common/dict/invest';
import DictionConstUtil, { SGU_CACHE } from '@/utils/diction-const-util';
import { dateFormat, numberFormat, unitShow, timeFormat, UUID, sortBy, getConfigItem } from '@/utils/tools';
import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
import StatusTag from '@/pages/risk-measure/components/status-tag.vue';
import ColumnUtil from '../utils/column-util';
import RiskTableLayout from '@/common/components/risk-table-layout.vue';
import RiskTable from '@/common/components/risk-table.vue';
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import InstructionDetail from '../components/instruction-detail.vue';
import InstructionInfoClass from '../class/instruction-info-class';
import { queryMarginTradingFunds, queryPermissionFunds } from '../api/margin-trading';
import RiskPagination from '@/common/components/risk-pagination.vue';

@Component({
    name: 'MarginTradingOrderInfo',
    components: {
        RiskTableLayout,
        RiskTable,
        StatusTag,
        RiskEntryInput,
        InstructionDetail,
        RiskPagination,
    },
})
// 融资融券指令管理tab
export default class MarginTradingOrderInfo extends InstructionInfoClass {
    SHOW_SECURITY = getConfigItem('SHOW_SECURITY');

    @Prop()
    renderCount: number;
    Invest: any = new Invest();

    // 查询表单
    searchForm: any = {
        assetTypes: [],
        businessType: 'x',
        directUser: '',
        fundCode: '',
        instNo: '',
        instStatus: '1',
        marketTypes: [],
        orderDirection: '',
        stockCode: '',
        stockType: '',
        stockTypes: [],
        assetCode: '',
        fundAcCode: '',
        sort: 'D_DIRECT_DATE' + ' ' + 'DESC' + ',' + 'D_DIRECT_TIME' + ' ' + 'DESC',
    };

    directDate: string = '';
    fundCodeSelectData: any[] = []; // 产品序号下拉框数据
    fundCodeWithPermission: any[] = []; // 根据权限查询的产品
    fundCodeWithAssetUnit: any[] = []; // 包含资产单元为融资融券信用资产单元的基金列表
    // 委托方向数据
    orderDirectionData: any[] = [
        {
            dictKey: '{',
            dictKeyName: '融资买入',
        },
        {
            dictKey: '[',
            dictKeyName: '融券卖出',
        },
        {
            dictKey: '}',
            dictKeyName: '卖券还款',
        },
        {
            dictKey: ']',
            dictKeyName: '买券还券',
        },
        {
            dictKey: '`',
            dictKeyName: '直接还款',
        },
        {
            dictKey: '~',
            dictKeyName: '直接还券',
        },
        {
            dictKey: 'C',
            dictKeyName: '申购',
        },
        {
            dictKey: '1',
            dictKeyName: '买入',
        },
        {
            dictKey: '2',
            dictKeyName: '卖出',
        },
    ];
    investPriceSelectData: any = {}; // 价格模式下拉数据
    stockCodeSelectData: any[] = []; // 证券代码下拉框数据
    orderUsers: any[] = []; // 下单人下拉列表
    selectLoading: boolean = false; // 下拉框远程搜索时的加载状态

    stockType: any[] = []; // 证券类别下拉
    dataSource: any[] = []; // 指令表数据

    // 全部表格列
    tableColumns: any[] = [
        { content: '指令序号', id: 'instNo', minWidth: 120, fixed: 'left' },
        { content: '产品代码', id: 'fundCode', minWidth: 120, fixed: 'left' },
        { content: '产品名称', id: 'fundName', minWidth: 120 },
        { content: '组合编码', id: 'groupCode', minWidth: 150 },
        { content: '组合名称', id: 'groupName', minWidth: 150 },
        { content: '证券代码', id: 'stockCode', minWidth: 120 },
        { content: '证券名称', id: 'stockName', minWidth: 120 },
        { content: '证券类别', id: 'stockTypeName', minWidth: 120 },
        { content: '业务类型', id: 'businessTypeName', minWidth: 120 },
        { content: '委托方向', id: 'orderDirectionName', minWidth: 120 },
        { content: '投资类型', id: 'investTypeName', minWidth: 120 },
        { content: '币种', id: 'curName', minWidth: 120 },
        { content: '交易市场', id: 'marketName', minWidth: 120 },
        { content: '下达人', id: 'directUserName', minWidth: 100 },
        { content: '下达时间', id: 'directTime', minWidth: 120 },
        { content: '指令状态', id: 'instStatus', minWidth: 120, fixed: 'right' },
        { content: '操作', id: 'operate', minWidth: 120, fixed: 'right' },
    ];
    selectedFieldList: any[] = []; // 已选择字段列表(不包括固定字段)
    showFieldList: any[] = []; // 要显示的表格列
    layoutDialog: boolean = false; // 布局设置弹框显示

    // 指令明细字段
    detailFields: any[] = [];

    activeKey: string = 'detail'; //  指令当前tabKey
    tableKey: number = 0;

    clickRecord: any = {}; // 当前主表格点击的条目
    rowClickSetTime = null;
    instructionDetail: any = {};
    instStockDataSource: any[] = []; // 指令证券表数据
    instResultDataSource: any[] = []; // 指令结果表数据
    type: string = '';

    commonField = this.ColumnUtil.commonFieldSort;
    extraField: any = {};
    marketCodes: any = {};
    isShowTooltip: boolean = false;

    noData: boolean = true; // 是否有指令数据
    instructionInfoUrl: string = '/instruction/rzrq';

    @Watch('renderCount')
    onWatchRenderCount() {
        this.getInstruction(this.searchForm, this.pages);
    }
    hideVisible: boolean = true; // 是否隐藏
    assetCodeSelectData: any[] = [];
    fundAccountCodeSelectData: any[] = [];
    async mounted() {
        if (this.SHOW_SECURITY) {
            this.$axios.get('/asset/list/byFundCode').then((res: any) => {
                this.assetCodeSelectData = res;
            });
            this.$axios.get('/fdAc/list/byFundCode').then((res: any) => {
                this.fundAccountCodeSelectData = res;
            });
        }
        this.tableColumns = this.ColumnUtil.handleTableColumns(this.tableColumns, 'id');
        let priceTypeTemp = await SGU_CACHE('PriceType', '/dict/list/code/Y_000237', []);
        this.investPriceSelectData = DictionConstUtil.ListToPojo(priceTypeTemp);
        const fields = [
            [
                { content: '指令序号', id: 'instNo' },
                {
                    content: '指令状态',
                    id: 'instStatus',
                    needFormat: true,
                    formatter: value => (value != undefined ? this.instructionStatus[value] : '--'),
                },
                { content: '下达人', id: 'directUserName' },
                {
                    content: '下达时间',
                    id: 'directTime',
                    needFormat: true,
                    formatter: (value, row) => dateFormat(row['directDate']) + ' ' + timeFormat(row['directTime']) || '--',
                },
                {
                    content: '指令价格(元)',
                    id: 'orderPrice',
                    needFormat: true,
                    formatter: value => (value != undefined ? numberFormat(value, 4) : '--'),
                },
                {
                    content: '指令数量(份)',
                    id: 'orderAmount',
                    needFormat: true,
                    formatter: value => (value != undefined ? numberFormat(value, 2) : '--'),
                },
                {
                    content: '指令金额(元)',
                    id: 'orderBalance',
                    needFormat: true,
                    formatter: value => (value != undefined ? numberFormat(value, 2) : '--'),
                },
            ],
            [
                { content: '产品代码', id: 'fundCode' },
                { content: '产品名称', id: 'fundName' },
                { content: '组合编码', id: 'groupCode' },
                { content: '组合名称', id: 'groupName' },
                { content: '证券代码', id: 'stockCode' },
                { content: '证券名称', id: 'stockName' },
                { content: '证券类别', id: 'stockTypeName' },
            ],
            [
                { content: '投资类型', id: 'investTypeName' },
                { content: '业务类型', id: 'businessTypeName' },
                { content: '委托方向', id: 'orderDirectionName' },
                {
                    content: '还券模式',
                    id: 'repayMode',
                    needFormat: true,
                    formatter: value => value || '--',
                },
                {
                    content: '价格模式',
                    id: 'orderPriceType',
                    needFormat: true,
                    formatter: value => (value != undefined && value.trim() ? this.investPriceSelectData[value] : '--'),
                },
                { content: '当前市价', id: 'closePrice', needFormat: true, formatter: value => (value != undefined ? numberFormat(value, 2) : '--') },
                { content: '币种', id: 'curName' },
                { content: '交易市场', id: 'marketName' },
            ],
        ];
        this.detailFields = this.ColumnUtil.handleDetailFieldsOnSecurity(fields, true, this.ColumnUtil.otherAssetColumns, 'id');

        // 获取证券代码下拉框数据
        this.getstockCodeList('');
        // 下单人下拉列表
        this.$axios.post('instruction/user/select').then((res: any) => {
            this.orderUsers = res;
        });

        this.getStockType();
        this.queryLayout();
        this.queryfundList();
        this.marketCodes = DictionConstUtil.ListToPojo(await DictionConstUtil.FNMarketType());
    }

    query() {
        this.searchForm.directDate = Number(this.directDate) || null;
        this.clickRecord = {};
        this.getInstruction(this.searchForm, { currentPage: 1, pageSize: 50 });
    }

    handleButtonClick(action: string): void {
        if (action === 'hide') {
            this.hideVisible = !this.hideVisible;
            console.log(this.hideVisible, 'hideVisible');
        }
    }

    // 指令信息表格分页
    handleCurrentChange(): void {
        this.getInstruction(this.searchForm, this.pages);
    }

    // 排序改变
    changeTableSort(column: any): void {
        this.sortProp = column.property;
        this.sortOrder = column.order;
        let sortType = column.order == 'asc' ? 'ASC' : column.order == 'desc' ? 'DESC' : '';
        if (sortType) {
            this.searchForm.sort = this.findName(column.property, sortType);
        } else {
            this.searchForm.sort = 'D_DIRECT_DATE ' + 'DESC' + ',' + 'D_DIRECT_TIME ' + 'DESC';
        }
        this.getInstruction(this.searchForm, this.pages);
    }

    // 获取排序字段名称
    findName(name: string, order: string): string {
        let value = '';
        let field = '';
        let allFields = { ...this.commonField, ...this.ColumnUtil.fundTransferFieldSort, stockTypeName: 'C_STOCK_TYPE' };

        if (name === 'directTime') {
            value = 'D_DIRECT_DATE' + ' ' + order + ',' + 'D_DIRECT_TIME' + ' ' + order;
        } else {
            for (const key in allFields) {
                if (name === key) {
                    field = allFields[key];
                }
            }
            value = field + ' ' + order;
        }
        return value;
    }

    getInstruction(param: any, pages: any) {
        this.tableLoading = true;
        this.$axios
            .post(this.instructionInfoUrl, {
                ...this.searchForm,
                paging: {
                    currentPage: pages.currentPage,
                    pageSize: pages.pageSize,
                },
            })
            .then((res: any) => {
                this.dataSource = res.list;
                this.pages.total = res.total;
                if (this.dataSource.length) {
                    this.currentClickRow = this.dataSource[0] || {};
                    if (this.currentClickRow.instStatus == '0') {
                        this.type = 'history';
                    } else {
                        this.type = '';
                    }
                    (this.$refs['table'] as any).setCurrentRow(this.dataSource[0]);
                    this.handleRow({ row: this.currentClickRow });
                    this.noData = false;
                } else {
                    this.$set(this.instStockMsg.returnData, 'list', []);
                    this.$set(this.instResultMsg.returnData, 'list', []);
                    this.noData = true;
                }
                this.tableLoading = false;
            })
            .catch(() => {
                this.tableLoading = false;
            });
    }

    getStockType() {
        this.$axios.get('/dict/instruction/stockType/' + 9).then((res: any) => {
            this.stockType = res;
        });
    }
    // 获取证券代码下拉框数据
    getstockCodeList(value: string) {
        this.selectLoading = true;
        this.$axios
            .post('/dict/stock/report/select/' + 7, {
                dictKey: value,
                dictKeyName: value,
            })
            .then((res: any) => {
                this.stockCodeSelectData = res || [];
                this.selectLoading = false;
            });
    }

    handleStockVisibleChange(val) {
        if (!val) {
            this.getstockCodeList('');
        }
    }

    // 查询包含资产单元为融资融券信用资产单元的基金列表
    queryfundList() {
        Promise.all([queryMarginTradingFunds(), queryPermissionFunds('')]).then(res => {
            this.fundCodeWithAssetUnit = res[0];
            this.fundCodeWithPermission = res[1];
            // this.fundCodeSelectData = [];
            this.fundCodeWithAssetUnit.forEach(item => {
                this.fundCodeWithPermission.forEach(ele => {
                    if (ele.fundCode === item.fundCode) {
                        this.fundCodeSelectData.push(item);
                    }
                });
            });
        });
    }

    // 格式化日期
    formatterDate(row: any) {
        let date = dateFormat(row.directDate);
        let time = timeFormat(row.directTime);
        let dateTime = date + ' ' + time;
        return dateTime.trim() ? dateTime : '--';
    }

    // 修改指令
    handleUpdateInst(row: any) {
        this.$emit('changeTab', row);
    }

    // 查看按钮点击
    handleBtnLook(obj: any): void {
        this.$emit('handelOperate', { record: obj.row, history: this.type === 'history', clickRecord: this.clickRecord });
    }

    // 点击单行
    handleRow({ row }): void {
        this.clickRecord = row;
        if (this.clickRecord.orderDirectionName === '直接还券') {
            // 还券模式目前只有一种：即时还券
            this.clickRecord.repayMode = '即时还券';
        } else {
            this.clickRecord.repayMode = '';
        }

        this.currentClickRow = row;
        if (row.instStatus == '0') {
            this.type = 'history';
        } else {
            this.type = '';
        }
        this.getInstructionInfo();
    }

    // 查询指令证券和指令结果
    getInstructionInfo() {
        this.tabsLoading = true;
        this.stockLoading = true;
        const form = {
            serialNo: this.currentClickRow.instNo, // 流水号
            instNo: this.currentClickRow.instNo, // 指令序号
            outOrderCode: this.currentClickRow.outerOrderCode, // 外部指令序号
            showError: true, // 产品true, 浦银false
            dailyInstructionNo: 0, // 恒生指令序号
            indexDailyModify: 0, // 恒生指令修改次序
            sourceType: 1, // 数据来源类型 (判断是否外部指令下达),这里默认查询内部指令
        };
        let url = '';
        if (this.type === 'history') {
            url = '/instruction/inst/history/all/new';
        } else {
            url = '/instruction/inst/all/new';
        }

        this.$axios.post(url, form).then((res: any) => {
            let instStockDataSource = [];
            let instResultDataSource = [];

            if (res.rzrqStocks && res.rzrqStocks.length > 0) {
                instStockDataSource = res.rzrqStocks;
            }
            if (res.results && res.results.length > 0) {
                res.results.forEach((item, i) => (item.key = item.entryCode + '-' + i));
                res.results = res.results.sort(sortBy('thresholdType', 'desc'));
            }
            this.tabsLoading = false;
            this.stockLoading = false;
            instStockDataSource.forEach(ele => {
                ele.marketCode = this.marketCodes[ele.marketCode];
                ele.assetCode = this.clickRecord.assetCode;
                ele.assetName = this.clickRecord.assetName;
            });
            this.$set(this.instStockMsg.returnData, 'list', instStockDataSource);

            instResultDataSource = res.results;
            // instResultDataSource = res.results.filter((itme: any) => itme.thresholdType !== '4');
            this.$set(this.instResultMsg.returnData, 'list', instResultDataSource);
        });
    }

    async onSubmit(data) {
        await this.queryLayout();
    }

    // 获取页面布局信息
    async queryLayout() {
        let resList: any = await new Promise((resolve, reject) => {
            this.$axios('/tableLayout/query/MARGIN_TRADING_ORDER_INFO')
                .then((res: any) => {
                    resolve(res);
                })
                .catch(err => {
                    reject(err);
                });
        });
        if (resList) {
            this.selectedFieldList = JSON.parse(resList);
            this.showFieldList = this.fixedFieldList.concat(this.selectedFieldList);
            this.tableKey++;
        } else {
            this.showFieldList = this.tableColumns;
            this.selectedFieldList = this.tableColumns;
            this.tableKey++;
        }
    }
}
</script>
<style lang="scss" scoped>
@import '@/pages/risk-time/styles/inst-info';
</style>
